<template>
    <div class="audit-task-change-view">

      <div class="top-view">
        <el-form :inline="true" :model="datas" class="demo-form-inline" label-width="120px" size="medium" label-position="left">

          <el-row>

            <el-col :span="12">
              <el-form-item label="项目名称：">
                <span>{{datas.project_name}}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="任务名称：">
                <span v-if="datas.task_before">{{datas.task_before.task_name}}</span>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="计划开始时间：">
                <div v-if="before.start_date != after.start_date" style="color: red">
                  <span>{{before.start_date}}</span><span> -> </span><span>{{after.start_date}}</span>
                </div>
                <div v-else><span>{{before.start_date}}</span></div>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="计划结束时间：">
                <div v-if="before.end_date != after.end_date" style="color: red">
                  <span>{{before.end_date}}</span><span> -> </span><span>{{after.end_date}}</span>
                </div>
                <div v-else><span>{{before.end_date}}</span></div>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="工期（天）：">
                <div v-if="before.duration != after.duration" style="color: red">
                  <span>{{before.duration}}</span><span> -> </span><span>{{after.duration}}</span>
                </div>
                <div v-else><span>{{before.duration}}</span></div>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="任务负责人：">
                <div v-if="before.person_in_charge && after.person_in_charge">
                  <div v-if="before.person_in_charge.member_id != after.person_in_charge.member_id" style="color: red">
                    <span>{{before.person_in_charge.member_name}}</span><span> -> </span><span>{{after.person_in_charge.member_name}}</span>
                  </div>
                  <div v-else><span>{{before.person_in_charge.member_name}}</span></div>
                </div>
                <div v-else><span v-if="before.person_in_charge">{{before.person_in_charge.member_name}}</span></div>

              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item :label="isChangeMember ? '原任务参与人：' : '任务参与人：'">

<!--                <div class="task-member" style="display: flex">-->
<!--                  <div class="left">-->
<!--                    <template v-if="before.task_member">-->
<!--                      <div v-for="item in before.task_member">{{item.member_name}}</div>-->
<!--                    </template>-->
<!--                  </div>-->
<!--                  <span v-if="isChangeMember"> -> </span>-->
<!--                  <div class="right" v-if="isChangeMember">-->
<!--                    <template v-if="after.task_member">-->
<!--                      <div v-for="item in after.task_member">{{item.member_name}}</div>-->
<!--                    </template>-->
<!--                  </div>-->
<!--                </div>-->

                <div style="display: flex">

                  <div v-for="(item,index) in before.task_member">
                    <span>{{item.member_name}}</span>
                    <span v-if="index != before.task_member.length - 1">,</span>
                  </div>

<!--                  <div v-if="!before.task_member || !before.task_member[index]" style="margin-left: 20px">-->
<!--                    <span style="color: #409EFF">新增</span>-->
<!--                  </div>-->

<!--                  <div v-else-if="before.task_member && before.task_member[index] && before.task_member[index].member_id != item.member_id" style="margin-left: 20px">-->
<!--                    <span style="color:red">更改</span>-->
<!--                    <span>(原成员{{before.task_member[index].member_name}})</span>-->
<!--                  </div>-->

                </div>

              </el-form-item>

            </el-col>

            <el-col :span="12" v-if="isChangeMember">
              <el-form-item label="现任务参与人：">

                <div style="display: flex">

                  <div v-for="(item,index) in after.task_member">
                    <span>{{item.member_name}}</span>
                    <span v-if="index != after.task_member.length - 1">,</span>
                  </div>

                </div>

              </el-form-item>

            </el-col>

          </el-row>

        </el-form>
      </div>

      <el-form :model="datas" class="demo-form-inline" label-width="120px" size="medium" label-position="left">

        <el-form-item label="变更原因：">
          <div>{{datas.reason}}</div>
        </el-form-item>

        <el-form-item label="变更原因描述：">
          <div>{{datas.description}}</div>
        </el-form-item>

        <el-form-item label="变更影响程度：">
          <div>{{datas.level}}</div>
        </el-form-item>

        <el-form-item label="变更影响描述：">
          <div>{{datas.change_describe}}</div>
        </el-form-item>


      </el-form>

      <el-form :model="datas" class="demo-form-inline" label-width="200px" size="medium" label-position="left">

        <el-form-item label="自动更新后置任务时间安排">
          <span v-if="datas.task_after">{{datas.task_after.is_update_task_time ? '是' : '否'}}</span>
        </el-form-item>

      </el-form>

    </div>
</template>

<script>
    export default {
        name: "taskChangeView",
        props:{
            datas:{
                type:Object,
                default:function () {
                    return{
                        task_before:{},
                        task_after:{}
                    }
                }
            }
        },
        watch:{
            datas:{
                handler:function (newVal,oldVal) {
                    if (newVal){
                        this.before = newVal.task_before ? newVal.task_before :{}
                        this.after = newVal.task_after ? newVal.task_after : {}

                        if (this.after.task_member && this.before.task_member){
                            for (let i = 0; i < this.after.task_member.length; i++){
                                let index = this.before.task_member.findIndex(a=>a.member_id == this.after.task_member[i].member_id)
                                if (index == -1){
                                    this.isChangeMember = true
                                    break;
                                }
                            }
                        }
                    }
                },
                deep:true,
                immediate:true
            }
        },
        data:function () {
            return{
                before:{},
                after:{},
                isChangeMember:false
            }
        }
    }
</script>

<style scoped>

</style>
